<!DOCTYPE html>
<html>
<head th:include="cultivateWeb/header :: culHeaderCss">
</head>
<link type="text/css" href="/css/cultivateWeb/style/news.css" rel="stylesheet">
<body>
<!-- 顶部导航 -->
<header th:include="cultivateWeb/header :: header"></header>
<style>
    #container {
        height: 400px;
        width: 100%;
    }

    .amap-icon img {
        width: 25px;
        height: 34px;
    }

    .title2 {
        color: #333;
        font-size: 16px;
        font-weight: 700;
        font-family: 微软雅黑;
    }

    .va_1 {
        font-size: 16px;
    }
</style>
<div style="clear: both"></div>
<div style="background-color: #f7f7f7; ">
    <div class="layui-container">
        <p style="line-height: 40px">当前位置：<a href="/cultivate/homepage">首页</a> > 关于我们</p>
    </div>
    <div class="newsIfo">
        <div style="margin-bottom: 20px;display: inline-block"></div>
        <div style="width: 1100px;margin: 10px auto;" id="div_1">

        </div>
        <div style="clear: both"></div>
        <!--        <p class="p3"></p>-->
        <!--<p class="p4">
            湖南华豪科技有限公司
        </p>-->
        <div style="width: 1100px;margin: 0 auto 50px auto;" id="container"></div>
    </div>
</div>
<!-- footer ------------------------------------------------------- -->
<div class="footer" th:include="cultivateWeb/header :: footer"></div>
<script type="text/javascript"
        src="https://webapi.amap.com/maps?v=1.4.15&key=4b3ab4d6b960343056ee6bb285a5ce5f"></script>
</body>

<script>

    $(function () {
        $.ajax({
            url: '/jzApi/utils/selAboutUs',
            success: function (r) {
                var news = '';
                var longitude = '';
                var latitude = '';
                r.data.aboutUs.forEach(function (item, index) {
                    if (item.type == 'img') {
                        news += '<div class="flex" style="margin: 10px 0;padding-bottom: 20px"><div class="span_2 title2">' + item.name + '：</div>';
                        if (item.value.indexOf(";;") != -1) {//多张图片
                            var imgList = item.value.split(";;");
                            for (var i = 0; i < imgList.length; i++) {
                                news += '<img class="span_1" style="width:355px;margin:0 10px 10px 0" src="' + imgList[i] + '" />';
                            }
                        } else {
                            news += '<img class="span_1" style="height:80px" src="' + item.value + '" />';
                        }
                        news += '</div>'
                    } else if (item.type == 'longitude') {
                        news += '';
                        longitude = item.value
                    } else if (item.type == 'latitude') {
                        news += '';
                        latitude = item.value
                    } else {
                        news += '<div class="flex" style="margin: 10px 0"><span class="span_2 title2">' + item.name + '：</span>' +
                            '<span class="va_1">' + item.value + '</span></div>';
                        // news += '<p class="p">'+item.name+':'+item.value+'</p>';
                    }
                });
                mapData(longitude, latitude);
                $("#div_1").html(news);
            }
        })
    });

    function mapData(longitude, latitude) {
        // 创建地图实例
        var map = new AMap.Map("container", {
            zoom: 15,
            center: [longitude, latitude],
            resizeEnable: true
        });
        // 创建一个 Icon
        var startIcon = new AMap.Icon({
            // 图标尺寸
            size: new AMap.Size(25, 34),
            // 图标的取图地址
            image: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png',
            imageSize: new AMap.Size(135, 40),
            imageOffset: new AMap.Pixel(-95, -3)
        });

        // 将 icon 传入 marker
        var startMarker = new AMap.Marker({
            position: new AMap.LngLat(longitude, latitude),
            icon: startIcon,
            offset: new AMap.Pixel(-13, -30)
        });
        // 将 markers 添加到地图
        map.add([startMarker]);
    }

</script>
</html>